<template lang="">
<div class="container">
		<div class="login-wraper">
			<h2>后台管理系统</h2>

			<el-form  :model="user" :rules="rules" ref="userRef">
				<el-form-item label="账号" prop="username">
					<el-input  v-model="username">
						
					</el-input>
				</el-form-item>

				<el-form-item label="密码" prop="password">
					<el-input  v-model="password">
					
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onRequestLogin">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { RequestLogin } from '@/api/user.js'
import router from '../router';
const username=ref('hao')
const password=ref('hao')

//调用接口登录
const onRequestLogin = async () => {
	let data = await RequestLogin(username.value, password.value)
	let { resultCode, resultInfo, token } = data
	console.log(token);
	if (resultCode == 1) {
		//解构
		let { username, nick, headerimg } = resultInfo
		//存储token
		localStorage.setItem('TOKEN', token)
		//保存用户信息
		localStorage.setItem('user', JSON.stringify(resultInfo))
		// 跳转		
		router.push({ path: '/index' })
	}
}

</script>
<style scoped lang="scss">
.container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #2c8bea;

	.login-wraper {
		width: 400px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;

		h2 {
			color: white;
		}

		form {
			background-color: white;
			border-radius: 8px;
			padding: 30px 25px;

			.el-button {
				width: 100%;
				margin-top: 24px;
			}
		}
	}
}
</style>
